<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>

  <script>
    let url = 'https://sf6-ttcdn-tos.pstatp.com/img/user-avatar/88e0048614d7b44d917e57bb854a4d4e~300x300.image'
    let url2 =
      'https://upload.jianshu.io/users/upload_avatars/1630118/60c871d4-f5b6-4576-922b-aa5dba77e537.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp'

    function loadImg(url) {
      return new Promise((resolve, reject) => {
        let img = document.createElement('img')
        img.onload = function () {
          resolve(img)
        }
        img.onerror = function (err) {
          reject(err)
        }
        img.src = url
      })
    }

    // loadImg(url).then(img=>{
    //   document.body.appendChild(img)
    // })
    // Promise.all([loadImg(url),loadImg(url2)]).then(res=>{
    //   res.forEach(img=>{
    //     document.body.appendChild(img)
    //   })
    // }).catch(err=>err)

    Promise.race([loadImg(url2),loadImg(url)]).then((result) => {
      console.log(result)
       document.body.appendChild(result)
    }).catch((error) => {
      console.log(error) // 打开的是 'failed'
    })
  </script>
</body>

</html>